<template>
  <el-dialog :visible.sync="_visible" width="450px" append-to-body>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="账号登录" name="account">
        <el-input
          class="login-dialog__input"
          placeholder="请输入账号"
          v-model="loginInfo.account"
        >
          <template slot="prepend">
            <i class="el-icon-user"></i>
          </template>
        </el-input>
        <el-input
          class="login-dialog__input"
          placeholder="请输入密码"
          type="password"
          v-model="loginInfo.password"
        >
          <template slot="prepend">
            <i class="el-icon-lock"></i>
          </template>
        </el-input>

        <el-button
          type="primary"
          style="min-width: 100%; margin-top: 1.5rem"
          @click="login"
        >
          登录
        </el-button>
      </el-tab-pane>
      <el-tab-pane label="手机登陆" name="phone">
        <el-input
          class="login-dialog__input"
          placeholder="请输入手机号"
          v-model="loginInfo.phone"
        >
          <template slot="prepend">
            <i class="el-icon-user"></i>
          </template>
        </el-input>
        <el-input
          class="login-dialog__input"
          placeholder="请输入验证码"
          v-model="loginInfo.code"
        >
          <template slot="prepend">
            <i class="el-icon-lock"></i>
          </template>
          <el-button slot="append" @click="getCode">获取验证码</el-button>
        </el-input>

        <el-button
          type="primary"
          style="min-width: 100%; margin-top: 1.5rem"
          @click="login(2)"
        >
          登录
        </el-button>
      </el-tab-pane>
    </el-tabs>

    <template slot="footer">
      <div class="login-dialog__footer">
        <span @click="toRegister">立即注册</span>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {
  computed,
  defineComponent,
  reactive,
  ref,
  watch,
} from '@vue/composition-api';
import { useNav } from '../hooks';
import { RouterMap } from '../utils/constants';
import { setUser, setToken } from '../utils/baseinfo';
import { Message } from 'element-ui';
import { loginByPassword, loginByCaptcha, sendCaptcha } from '../api/login';

export default defineComponent({
  props: {
    visible: Boolean,
  },
  setup(props, { emit, root }) {
    const activeTab = ref('account');
    const type = ref(1);
    const { to } = useNav({ root });

    const loginInfo = reactive({
      account: '',
      phone: '',
      password: '',
      code: '',
    });

    watch(activeTab, (newVal, oldVal) => {
      if (newVal == 'phone') {
        type.value = 2;
        return;
      }
      type.value = 1;
    });

    const _visible = computed({
      get() {
        return props.visible;
      },
      set(val) {
        emit('update:visible', val);
      },
    });

    const getCode = () => {
      if (loginInfo.phone == '') {
        Message({
          message: '请输入手机号',
          type: 'error',
          duration: 3 * 1000,
        });
        return;
      }
      sendCaptcha(loginInfo.phone)
        .then((response) => {
          Message({
            message: '验证码发送成功',
            type: 'success',
          });
        })
        .catch((error) => {
          Message({
            message: error.msg,
            type: 'error',
          });
        });
    };

    const login = async () => {
      if (type.value === 1) {
        loginByPassword(loginInfo.account, loginInfo.password).then(
          (response) => {
            setToken(response.data.token);
            setUser({
              id: response.data.id,
              name: response.data.name,
              role: response.data.role,
            });
            _visible.value = false;
            to(RouterMap.Home);

            Message({
              message: '登录成功',
              type: 'success',
            });
            emit('login-success');
          }
        );
        return;
      }
      loginByCaptcha(loginInfo.phone, loginInfo.code).then((response) => {
        setToken(response.data.token);
        setUser({
          id: response.data.id,
          name: response.data.name,
          role: response.data.role,
        });
        _visible.value = false;
        to(RouterMap.Home);

        Message({
          message: '登录成功',
          type: 'success',
        });
      });
    };


    const toRegister = () => {
      _visible.value = false;
      to(RouterMap.Register);
    };

    return { _visible, activeTab, type, loginInfo, getCode, login, toRegister };
  },
});
</script>

<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding-left: 3rem;
  padding-right: 3rem;
}
.login-dialog {
  &__input {
    margin-bottom: 1.5rem;
    &:first-child {
      margin-top: 2rem;
    }
  }

  &__footer {
    font-size: 0.8rem;
    color: #999;
    cursor: pointer;
  }
}
</style>
